<extend name="Layout:layout"/>

<block name="css">
    <link rel="stylesheet" href="__PUBLIC__/metis/assets/lib/datatables/3/dataTables.bootstrap.css">
    <link rel="stylesheet" href="__PUBLIC__/metis/assets/lib/datepicker/css/datepicker.css">
    <style type="text/css"></style>
</block>

<block name="srcjs">
    <script type="text/javascript" src=""></script>
</block>

<block name="content">
    <div class="row ui-sortable">
        <div class="col-lg-12">

            <!--Begin Datatables-->
            <div class="row">
                <div class="col-lg-12">
                    <div class="box">
                        <header>
                            <div class="icons"> <i class="fa fa-table"></i>
                            </div>
                            <h5>{$username}</h5>
                            <div class="text-right" style="padding: 5px 10px 0px 0px">
                                <a href="{:U('index')}" class="btn btn-info btn-sm">返回</a>
                            </div>
                        </header>
                        <a href="showDetailInfo.html"></a>
                        <div class="body">
                            <table id="detailTable" class="table table-bordered table-condensed table-hover table-striped text-center">
                                <thead>
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">文档编号</th>
                                        <th class="text-center">文档名称</th>
                                        <th class="text-center">文档类型</th>
                                        <th class="text-center">学习时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <volist name="details" id="detail" key="k">
                                    <tr>
                                        <td>{$k}</td>
                                        <td>{$detail.pdoc_sn}</td>
                                        <td>{$detail.pdoc_name}</td>
                                        <td>{$detail.pdoc_catagory}</td>
                                        <td>{$detail.time_study|formatTimeStudy}</td>
                                    </tr>
                                </volist>

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="4"></td>
                                        <td>共计：{$total_learn_time|formatTimeStudy}</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </div>
    </div>

</block>

<block name="customjs">

    <script src="__PUBLIC__/metis/assets/lib/datatables/jquery.dataTables.js"></script>
    <script src="__PUBLIC__/metis/assets/lib/datatables/3/dataTables.bootstrap.js"></script>
    <script src="__PUBLIC__/metis/assets/lib/datepicker/js/bootstrap-datepicker.js"></script>

    <script type="text/javascript">

        $(function () {
            $('#detailTable').dataTable({
                "scrollX": true,
                "language": dtChinese
            });


        });

    </script>

</block>